<template>
  <view>
    <uni-card>
      <view class="choose" @click="goSelectElevator">
        <view class="input">{{ name }}</view>
        <uni-icons type="arrowright"></uni-icons>
      </view>

    </uni-card>
    <uni-card>
      <view class="choose">
        <input class="input" placeholder-class="coleles" v-model="tiringFloor" type="number"
               placeholder="请输入困人楼层"/>
        <text>层</text>
      </view>
    </uni-card>
    <!-- 多选 -->
    <uni-card>
      <view class="uni-list">
        <checkbox-group style="width: 50%;" v-for="(item,index) in list_type" :key="item.value"
                        @change="checkboxChange($event,index)">
          <label class="uni-list-cell uni-list-cell-pd">
            <view>
              <checkbox :value="item.value" :checked="item.checked" style="transform: scale(0.8);" color="#1B5DBE"/>
            </view>
            <view>{{ item.dictLabel }}</view>
          </label>
        </checkbox-group>
      </view>
    </uni-card>

    <!-- 备注 -->
    <uni-card>
      <view class="comment">
        <wu-textarea v-model="remark" placeholder="备注:" maxlength="100"></wu-textarea>
      </view>
    </uni-card>

    <button type="default" @click="gosubmit">提交</button>
  </view>
</template>

<script>
import WuTextarea from "@/uni_modules/wu-textarea/components/wu-textarea/wu-textarea.vue";
import {getDict} from "@/utils/dict";
import {DictEnum} from "@/enums/dictEnum";
import {dictDataInfo} from "@/api/system/dict/dictData";
import {getElevator} from "@/api/iot/elevator";
import {addElevatorTiring} from "@/api/iot/elevatorTiring";
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import UniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  computed: {},
  components: {UniIcons, UniNavBar, UniCard, WuTextarea},
  data() {
    return {
      name: '选择电梯',
      tiringFloor: '', //困人楼层
      remark: '', //备注
      pageNum: 1,
      getListFlag: true,
      flag: true,
      list_type: [],
      elevatorId: '',
    }
  },
  onLoad(e) {
    this.genre()
  },
  methods: {
    getDict,
    //选择电梯
    async elevator_name(elevatorId) {
      const res = await getElevator(elevatorId);
      this.name = res.elevatorName
      this.elevatorId = res.elevatorId
    },
    //困人类型
    async genre() {
      const res = await dictDataInfo(DictEnum.IOT_TIRING_CAUSE)
      this.list_type = res
    },
    // 导航返回
    goback() {
      uni.navigateBack({})
    },
    onKeyInput: function (event) {
      this.inputValue = event.target.value
    },

    // 选中
    checkboxChange: function (e, ind) {
      this.list_type[ind].selectStatus = !this.list_type[ind].selectStatus;
    },

    // 选择电梯接口调用 elevatorInfo/findCommunityByToken
    goSelectElevator() {
      uni.navigateTo({
        url: '/pages/tabbar/polling/searchResult/searchResult?type=' + 1,
      })

    },

    // 接口调用
    async gosubmit() {
      if (this.name == '选择电梯' || this.name == '') {
        uni.showToast({
          title: '请添加电梯',
          icon: 'none'
        })
        return
      }
      if (this.tiringFloor == '') {
        uni.showToast({
          title: '请输入困人楼层',
          icon: 'none'
        })
        return
      }
      var outsideTask = []
      for (var i = 0; i < this.list_type.length; i++) {
        if (this.list_type[i].selectStatus != false) {
          outsideTask.push(this.list_type[i].dictCode)
        }
      }
      if (outsideTask.length == 0) {
        uni.showToast({
          title: '请选择被困类型',
          icon: 'none'
        })
        return
      }
      // if (this.remark == '') {
      // 	uni.showToast({
      // 		title: '请输入备注',
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      let parme = {
        elevatorId: this.elevatorId,
        tiringFloor: this.tiringFloor,
        tiringCause: outsideTask.join(","),
        remark: this.remark,
      }
      const res = await addElevatorTiring(parme)
      uni.showToast({
        title: '提交成功',
        icon: 'none'
      })
      uni.switchTab({
        url: "/pages/index/index"
      })
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

page {
  width: 750rpx;
  background: #EFF2F5;
  overflow: hidden;
}

view {
  font-size: 28rpx;
  line-height: 1.8;

}

.uni-card {
  width: 670rpx;
  /* height: 96rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  border: none;
  margin: 0 auto;
  margin-top: 10px;

}

.choose {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
}

.input {
  text-align: left;
}

/* 多选框 */
.checkbox {
  width: 16rpx;
  height: 16rpx;
  background: #FFFFFF;
  border: 1rpx solid #E2E6EF;
  box-shadow: 3rpx 3rpx 2rpx 0rpx rgba(0, 0, 0, 0.05);
  border-radius: 4rpx;
  transform: scale(0.1);
}

.wraper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* height: 100px; */
}

.uni-list-cell {
  display: flex;
  flex-direction: row;

}

.uni-label-pointer {
  width: 100%;
}

.uni-label-pointer view {
  font-size: 24rpx;

}

/* 备注 */
.comment {
  width: 100%;
  /* height: 226rpx; */
  background: #FFFFFF;
  border-radius: 16rpx;
  border: none;
}

.input-comment {
  /* height:226rpx; */
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  overflow: hidden;
  word-break: break-all;
  /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis;
  /* 超出部分省略号 */
  font-size: 24rpx;
  color: #ADB5C5;
}

.coleles {
  color: #323232;
  font-size: 13px;
}

.uni-list {
  display: flex;
  flex-wrap: wrap;

}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: transparent;
}

button {
  width: 670rpx;
  height: 52px;
  background: #017EFE;
  box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
  border-radius: 26px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 52px;
  margin: 50px auto 34px;
}
</style>
